<template>
	<view class="teacher-container">
		<j-tabs :tabs="tabs" @change="tabsChange" :controlIndex="currentIndex"></j-tabs>
		<!-- 本课作业 -->
		<view v-if="currentIndex == 0" class="list-area current-area">
			<view v-for="(item, index) in list" :key="index" class="card" @tap="goItem(item.id, 2)">
				<view class="user-avator">
					<image :src="item.avatar" class="avator-img"></image>
					<span class="title">教师: {{item.authorName}}</span>
				</view>
				<view class="info">
					<view class="subTitle">{{item.title}}</view>
					<view class="subTitle">{{item.subTitle}}</view>
				</view>
				<view class="card-bottom">
					<view class="title-dtl">
						<span class="star" :style="{color: theme.success}">{{item.starCount}}点赞</span>
						<span class="comment" :style="{color: theme.warning}">{{item.commentCount}}评论</span>
					</view>
					<span>提交于 {{item.creationTimeStr}}</span>
				</view>
			</view>
			<!-- 默认提示 -->
			<view v-if="showBottom" class="none-info">
				--再找也没有了~~--
			</view>
			<view class="buttons-area">
				<view class="opt-button" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goStudentList">学员作业区</view>
				<view class="opt-button" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="doHomeWork">去写作业</view>
			</view>
		</view>
		<!-- 往期作业 -->
		<view v-if="currentIndex == 1" class="list-area">
			<view v-for="(item, index) in timeTables" :key="index" class="list-item" @click="goCurrentHomework(item)">
				<span :style="{fontWeight:`${item.canHomework?'bold':'400'}`}">
					{{item.title}}
					{{`${item.canHomework?'(已布置)':''}`}}
				</span>
			</view>
		</view>
	</view>
</template>

<script>
	import jTabs from '@/components/tui-tabs/j-tabs.vue'
	export default{
		name: 'homeworkList',
		components:{ jTabs },
		data(){
			return{
				theme: this.$theme,
				classId: '',
				mainId: '',
				list:[],
				timeTables:[],
				//tabs栏配置项目
				tabs:{
					defaultIndex: 0,
					width: '100%',
					height: '6vh',
					list:[
						{selectedIndex: 0, text: '本课作业'},
						{selectedIndex: 1, text: '往期作业'}
					]
				},
				currentIndex: 0,
				showBottom: false
			}
		},
		watch:{
			list:{
				deep: true,
				handler(e){
					if(e.length == 0){
						this.showBottom = true
					}else{
						this.showBottom = false
					}
				}
			},
			currentIndex(e){
				switch(e){
					//本课作业
					case 0:
						this.list = []
						this.getCurrentList().then(resp=>{
							this.list = resp.result
						})
						break
					//往期作业
					case 1:
						this.getPreList().then(resp=>{
							this.timeTables = resp.timeTables
						})
						break
				}
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.courseName
			})
			this.classId = e.classId
			this.mainId = e.mainId
			this.getCurrentList().then(resp=>{
				this.list = resp.result
			})
		},
		methods:{
			//跳转当前课程布置的作业
			goCurrentHomework(e){
				// 直播中或者下课后可以进
				if(e.canHomework){
					this.mainId = e.id
					this.currentIndex = 0
				}else{
					uni.showToast({
					    title: '老师还没有布置作业哦',
						icon: 'none',
					    duration: 2000
					})
				}
			},
			//tabs栏切换
			tabsChange(selectedIndex){
				this.currentIndex = selectedIndex
			},
			//获取本课作业列表
			getCurrentList(mainId){
				return this.$http.request({
					url: 'api/Essay/GetAllEssay',
					method: 'GET',
					allow: true,
					showLoading: false,
					data: {
						SkipCount: 0,
						MaxResultCount: 999,
						MainId: this.mainId,
						EssayType: 2 //2： 教师布置作业
					}
				})
			},
			//获取往期作业
			getPreList(){
				return this.$http.request({
					url: 'api/LivePlayer/GetLivePlayListById',
					data: {
						Id: this.classId
					}
				})
			},
			//教师明细页面跳转
			goItem(essayId, type){
				uni.navigateTo({
					url: `../viewMeiPian/viewMeiPian?essayId=${essayId}&essayType=${type}&viewMode=1&Id=${this.mainId}`
				})
			},
			//学生列表跳转
			goStudentList(){
				uni.navigateTo({
					url: `../meiPianList/meiPianList?mainId=${this.mainId}`
				})
			},
			//写作业
			async doHomeWork(){
				let eassyId = ''
				await this.getEassyId().then(resp=>{
					if(resp.result.hasEssay){
						eassyId = resp.result.essayId
					}
				})
				if(eassyId){
					uni.navigateTo({
						url: `../meipian/meipian?&isEditor=true&essayType=3&id=${eassyId}&isSingleAudio=false`
					})
				}else{
					uni.navigateTo({
						url: `../meipian/meipian?essayType=3&mainId=${this.mainId}&isSingleAudio=false`
					})
				}
			},
			//获取学生作业Id
			getEassyId(){
				return this.$http.request({
					url: 'api/Essay/CheckByMainId',
					method: 'GET',
					showLoading: true,
					allow: true,
					data:{
						Id: this.mainId,
						EssayType: 3
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.teacher-container{
		width: 100vw;
		min-height: 100vh;
		animation: 0.5s show;
		background-color: #f1f1f1;
		overflow: hidden;
		.current-area{
			height: 88vh;
		}
		.list-area{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			overflow-x: hidden;
			overflow-y: auto;
			.card:active{
				background-color: #dddddd;
			}
			.card{
				width: 85%;
				// min-height: 15vh;
				position: relative;
				transition: 0.3s;
				margin: 20rpx 0;
				background-color: #fff;
				border-radius: 4px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				padding: 20rpx;
				// overflow: hidden;
				.user-avator{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.avator-img{
						width: 65rpx;
						height: 65rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
					.title{
						font-size: 35rpx;
						font-weight: 600;
						color: #464646;
						word-break:break-all;
					}
				}
				.correct-tag{
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					border-radius: 50%;
					width: 120rpx;
					height: 120rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					white-space: nowrap;
					transform: rotate(30deg);
				}
				.is-correct{
					border: .5px solid #cacaca;
					color: #9f9f9f;
				}
				.is-correct::after{
					content: "";
					width: 110%;
					height: 110%;
					border-radius: 50%;
					border: .5px solid #cacaca;
					position: absolute;
					left: -6%;
					top: -6%;
				}
				.no-correct{
					border: .5px solid #ebae33;
					color: #ebae33;
				}
				.no-correct::after{
					content: "";
					width: 110%;
					height: 110%;
					border-radius: 50%;
					border: .5px solid #ebae33;
					position: absolute;
					left: -6%;
					top: -6%;
				}
				.info{
					width: 85%;
					min-height: 160rpx;
					margin: 20rpx 0;
					padding-left: 80rpx;
					.subTitle{
						padding: 10rpx 0;
						font-size: 28rpx;
						color: #484848;
						word-break: break-all;
					}
								
				}
				.card-bottom{
					width: 100%;
					height: 20rpx;
					font-size: 22rpx;
					color: #747474;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title-dtl{
						display: flex;
						position: relative;
						left: 20rpx;
						.author, .star, .comment{
							font-size: 28rpx;
							color: #484848;
							margin-right: 10rpx;
						}
						.star{
							color: #67C23A;
						}
						.comment{
							color: #ebae33;
						}	
					}
				}
			}
			.list-item{
				width: 100%;
				padding: 50rpx 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1rpx solid #d9d9d9;
				transition: background-color .3s;
				span{
					font-size: 28rpx;
					// font-weight: bold;
					position: relative;
					left: 30rpx;
				}
			}
			.list-item:active{
				background-color: #d6d6d6;
			}
			.none-info{
				width: 100vw;
				height: 10vh;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: inset 0 5rpx 10rpx #f0f0f0;
				color: #747474;
				font-size: 28rpx;
			}
			.buttons-area{
				width: 100%;
				height: 6vh;
				display: flex;
				justify-content: space-around;
				align-items: center;
				position: absolute;
				bottom: 0;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				.opt-button{
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 28rpx;
					padding: 10rpx 20rpx;
				}
			}
		}
	}
</style>
